<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>乘车点管理</title>
    <meta name="decorator" content="default"/>
    <link href="${ctxStatic}/static_back/css/public.css" type="text/css" rel="stylesheet">
    <link href="${ctxStatic}/static_back/css/main.css" type="text/css" rel="stylesheet">
    <script src="https://webapi.amap.com/maps?v=1.4.9&key=f50df840d14861c95415ec7742d42d86"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=f50df840d14861c95415ec7742d42d86&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>
</head>

<body>
    <%--标题--%>
    <div class="top-section">
        <input id="btnCancel" class="back-link" type="button" value="&lt;" onclick="history.go(-1)"/>
        <h2><shiro:hasPermission name="air:airRidePoint:edit">${not empty airRidePoint.id?'修改乘车点信息':'新增乘车点'}</shiro:hasPermission></h2>
    </div>

    <%--表单主体--%>
    <div class="body-section white-body form-body" >
        <form:form id="inputForm" modelAttribute="airRidePoint" action="${ctx}/air/airRidePoint/save" method="post" >
            <form:hidden path="id" id="pointId"/>
            <input type="hidden" id="airParkingLotId" value="${airRidePoint.airParkingLot.id}"/>
            <sys:message content="${message}"/>

            <div class="form-box">
                <div class="input-div">
                    <span>名称</span>
                    <div>
                        <form:input path="name" htmlEscape="false" class=""/>
                        <em>*</em>
                    </div>
                </div>
                <div class="input-div">
                    <span>位置</span>
                    <div>
                        <form:input path="position" htmlEscape="false" readonly="true" class="" id="point"/>
                        <em>*</em>
                    </div>
                </div>
                <form:input path="city" type="hidden" htmlEscape="false" id="city" />
                <form:input path="lon" type="hidden" htmlEscape="false" id="lon"/>
                <form:input path="lat" type="hidden" htmlEscape="false" id="lat"/>
                <form:input path="busSum" type="hidden" htmlEscape="false" />
                <form:input path="driverSum" type="hidden" htmlEscape="false" />
                <form:input path="workerSum" type="hidden" htmlEscape="false" />
                <div class="input-div">
                    <span>摄像头IP</span>
                    <div>
                        <form:input path="camera1" htmlEscape="false" class="" placeholder="第1个摄像头" />
                    </div>
                </div>
                <div class="input-div">
                    <div>
                        <form:input path="camera2" htmlEscape="false" class="" placeholder="第2个摄像头" />
                    </div>
                </div>
                <div class="input-div">
                    <div>
                        <form:input path="camera3" htmlEscape="false" class="" placeholder="第3个摄像头" />
                    </div>
                </div>
                <div class="input-div">
                    <div>
                        <form:input path="camera4" htmlEscape="false" class="" placeholder="第4个摄像头" />
                    </div>
                </div>
                <div class="input-div">
                    <span>负责人</span>
                    <div>
                        <form:input path="leader" htmlEscape="false" class="" />
                    </div>
                </div>
                <div class="input-div">
                    <span>联系电话</span>
                    <div>
                        <form:input path="phone" htmlEscape="false" class="" />
                    </div>
                </div>
                <div class="input-div">
                    <span>对讲机</span>
                    <div>
                        <form:input path="interphone" htmlEscape="false" class=""/>
                    </div>
                </div>
            </div>

            <div class="form-box form-box-gary">
                <div class="input-div">
                    <span>行程目的地</span>
                    <div>
                        <form:select id="airParkingLotIds" path="airParkingLot.id">
                            <%--<form:option value="" label="应急停车场"/>--%>
                            <form:options items="${parkingLots}" itemValue="id" itemLabel="name"/>
                        </form:select>
                    </div>
                </div>
                <div class="input-div">
                    <span>费用</span>
                    <div>
                        <form:radiobuttons path="paytype" items="${fns:getDictList('pay_type')}" itemLabel="label" itemValue="value"/>
                    </div>
                </div>
                <div class="input-div">
                    <span>线路编号</span>
                    <div>
                        <form:select id="route" path="route">
                            <%--<form:option value="" label="应急停车场"/>--%>
                            <form:option value="-1" label="待定"/>
                            <form:options items="${fns:getDictList('air_route')}" itemLabel="label" itemValue="value"/>
                        </form:select>
                    </div>
                    <span id="route_span" style="color:red"></span>
                </div>
            </div>

            <div class="form-box form-box-gary">
                <div class="input-div">
                    <span>调度管理</span>
                    <div>
                        <form:radiobuttons path="dispatchType" items="${fns:getDictList('is_join')}" itemLabel="label" itemValue="value"/>
                    </div>
                </div>
                <div class="input-div">
                    <span>预约管理</span>
                    <div>
                        <form:radiobuttons path="appointType" items="${fns:getDictList('is_join')}" itemLabel="label" itemValue="value"/>
                    </div>
                </div>
                <div class="input-div">
                    <span>候车预警</span>
                    <div>
                        超过
                        <form:input path="sliRetention" htmlEscape="false" class="" style="width:70px;" />
                        人，为<em>轻微滞留</em>
                    </div>
                </div>
                <div class="input-div">
                    <div>
                        超过
                        <form:input path="serRetention" htmlEscape="false" class="" style="width:70px;" />
                        人，为<em>严重滞留</em>
                    </div>
                </div>
            </div>

            <div class="form-bottom">
                <shiro:hasPermission name="air:airRidePoint:edit">
                    <input id="btnSubmit" class="btn btn-blue" type="submit" value="保 存"/>
                </shiro:hasPermission>
            </div>
        </form:form>
    </div>

    <%--地图弹窗--%>
    <div id="mapLayer" class="window-layer map-layer">
        <div class="window-bg"></div>
        <div class="window-main">
            <h3>获取地理位置</h3>
            <div class="window-body">
                <div id="mapContainer"></div>
                <input id="mapInput" type="text" placeholder="请输入位置名称"/>
            </div>
            <div class="window-bottom">
                <input type="button" class="btn btn-blue" value="确定" onclick="CloseDiv()"/>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#name").focus();
            $("#inputForm").validate({
                submitHandler: function (form) {
//                    loading('正在提交，请稍等...');
                    if(!route_is_bind) {
                        form.submit();
                    }
                },
                errorContainer: "#messageBox",
                errorPlacement: function (error, element) {
                    $("#messageBox").text("输入有误，请先更正。");
                    if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
            var lon = $("#lon").val();
            var lat = $("#lat").val();

            //触发地图选择
            $("#point").bind("click", function () {
                $(".map-layer").css("display", "block");
            });
            var map = new AMap.Map('mapContainer', {
                zoom: 11, //初始化地图层级
                center: [113.58397428, 22.2790923] //初始化地图中心点
            });
            var maker = new AMap.Marker({
                //                position: new AMap.LngLat(113.58397428, 22.2790923),   // 经纬度对象，如 new AMap.LngLat(116.39, 39.9); 也可以是经纬度构成的一维数组[116.39, 39.9]
                title: ''
            });
            if (lon !== null && lat !== null && lon !== "" && lat !== "") {
                maker.setPosition([lon, lat]);
            }
            map.on('hotspotclick', function (e) {
                console.log(e);
                $("#point").val(e.name);
                maker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()]);
                maker.setTitle(e.name);
                $("#lon").val(e.lnglat.getLng());
                $("#lat").val(e.lnglat.getLat());
                var lonlan = [e.lnglat.getLng(), e.lnglat.getLat()];
                var geocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: "all"
                });
                geocoder.getAddress(lonlan, function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        $("#city").val(result.regeocode.addressComponent.city);
                    }
                });
            });
            map.add(maker);

            //输入提示
            var autoOptions = {
                input: "mapInput"
            };
            var auto = new AMap.Autocomplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
                map: map
            });  //构造地点查询类
            AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
            function select(e) {
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name);  //关键字查询查询
            }
            var ParkingLotId = $("#airParkingLotId").val();
            $("#airParkingLotIds").val(ParkingLotId);
        });

        function CloseDiv() {
            $(".map-layer").css("display", "none");
        }
        var route_is_bind = false;
        $("#route").change(function () {
            var val = $("#route").val();
            var id = $("#pointId").val();
            if(val!=='-1'){
                $.ajax({
                    url:"RouteIsBind.do",
                    async:false,
                    data:{id:id,route:val},
                    type:"GET",
                    success:function (data) {
                        var result = data.data;
                        if(result==true){
                            $("#route_span").html("该线路编号已被占用，请选择其他线路编号！");
                            route_is_bind =true;
                        }else {
                            $("#route_span").html("√");
                            route_is_bind = false;
                        }
                    }
                })
            }else {
                $("#route_span").html("√");
                route_is_bind = false;
            }
        });

    </script>

</body>
</html>